<template>
  <el-card>
    <div class="courseware-list-container">
      <div class="courseware-list-item" v-for="(item,index) in coursewareDatas" :key="index">
        <div>
          <svg-icon icon-class="file" />
          <span class="courseware-name">{{ item.realName }}</span>
        </div>
        <el-button :icon="Download" type="primary" circle @click="downLoadFile(item)"/>
      </div>
      <el-empty v-if="coursewareDatas.length === 0" description="暂无课件信息" />
    </div>
  </el-card>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import { listcourseware } from '@/api/tsm/course.js'
import SvgIcon from '@/components/SvgIcon/index.vue'
import { Download } from '@element-plus/icons-vue'
import axios from "axios";
import { saveAs } from 'file-saver'
import { ElMessage } from 'element-plus'
import { getToken } from '@/utils/auth.js'
import { blobValidate } from '@/utils/ruoyi.js'

let props = defineProps({
  courseId: {
    type: String,
    required: true
  }
})
const coursewareDatas = ref([])

onMounted(() => {
  listcourseware(props.courseId).then(response => {
    coursewareDatas.value = response.data
  })
})

function downLoadFile(data) {
  ElMessage.info("正在下载请稍等")
  console.log(data);
  axios.get(data.path, {
    headers: {
      Authorization: 'Bearer ' + getToken()
    }
  }).then((res)=>{
    const isBlob = blobValidate(res.data);
    if (isBlob) {
      const blob = new Blob([res.data])
      saveAs(blob, data.realName)
      ElMessage.success("下载完成")
    } else {
      this.printErrMsg(res.data);
    }
  })
}
</script>
<style scoped lang="scss">
.courseware-name{
  margin-left: 0.3em;
}
.courseware-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1em;
  padding: 0.3em;
  border-radius: 12px;
}

.courseware-list-item:hover {
  background-color: var(--el-menu-hover-bg-color);
}
</style>